import { useMemo, type CSSProperties } from "react";
import { FooterPropsType, FooterPropsDefault } from "../props";
import { Button } from "antd";
import "../style/DrawerFooter.less";
import { useTranslation } from "react-i18next";
interface ComponentProps extends ComponentNode {
	close?: Function;
	ok?: Function;
	slots: Recordable<React.ReactNode>;
}

const DrawerFooter = (props: FooterPropsType & ComponentProps) => {
	// fix React18 "defaultProps" problem
	props = Object.assign({}, { ...FooterPropsDefault, ...props });

	const { t } = useTranslation();

	const slots: Recordable<React.ReactNode> = props.slots;
	const getStyle = useMemo((): CSSProperties => {
		const heightStr = `${props.height}`;
		return {
			height: heightStr,
			lineHeight: `calc(${heightStr} - 1px)`
		};
	}, [props.height]);

	return props.showFooter && !slots?.footer ? (
		<div className="basic-drawer-footer dark:bg-dark" style={getStyle}>
			{!slots?.footer && props.showCancelBtn && (
				<Button {...props.cancelButtonProps} className="basic-drawer-footer-btn" onClick={() => props.close && props.close()}>
					{t(props.cancelText)}
				</Button>
			)}
			{props.showOkBtn && (
				<Button
					type={props.okType}
					{...props.okButtonProps}
					className="basic-drawer-footer-btn"
					loading={props.confirmLoading}
					onClick={() => props.ok && props.ok()}
				>
					{t(props.okText)}
				</Button>
			)}
		</div>
	) : (
		slots.footer
	);
};

export default DrawerFooter;
